// 1= 引入vue
import Vue from 'vue';

//2-引入vuex
import VueX from 'vuex';
//引入axios
import axios from 'axios'

//3-使用组件
Vue.use(VueX);

//分开书写配置项
const state={
    count:1,
    price:99,
    movieList:[]
}

// mutation修改state,进行状态更改,书写事件函数
const mutations = {
    addCount(state){
        state.count++
    },

    addCountN(state,{n}){
        state.count += n
    },
    //这里接收的数据是一个对象
    getMovieList(state, movieList){
        state.movieList = movieList
    }
}

//actions专门书写异步函数,一般完成的vueX是由actions处理,接收一个对象,里面由commit的一个方法,提交到mutations进行处理,修改state
const actions={
    addCountWait({commit}){
        //使用定时器模拟延迟
        setTimeout(() => {
            commit('addCount')
        }, 1000);
    },
    //在异步函数中传值,就需要接收一个载荷,payload包含传递信息, 发送方还是传递一个对象.
    addCountNWait({commit},payload){    
        setTimeout(() => {
            commit('addCountN',payload)
        }, 1000);
    },

    //异步axios请求一个电影数据
    async getMovie({commit}){
      const re = await axios.get('https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a')
      commit('getMovieList',re.data.data.list)
    }
}

//如果我们要对获取的列表进行过滤等,使用getter,可以认为是state的计算属性
const getters={
    //获取一个电影名为2-3的列表
    //getter中的函数接收得到第一个参数是state
    likeList(state){
        return state.movieList.filter((item)=>{
            return item.name.length >=2 && item.name.length <=3
        })
    },

    //如果需要传参,则需要返回一个函数
    LoveList(state){
        //返回的函数里,接收参数,同样使用解构的方式
        return ({a,b})=>{
            return state.movieList.filter((item)=>{
                return item.name.length >=a && item.name.length <=b
            })
        }
    }

}

//4-暴露vux实例
export default new VueX.Store({
    state,
    mutations,
    actions,
    getters
})